<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span style="font-size:30px;">用户列表</span>
      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
    </div>
    <el-table :data="filterTableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      :row-class-name="tableRowClassName" style="width: 100%">
      <el-table-column prop="date" label="头像" width="100px">
        <template>
          <el-avatar :size="50">
            <img src="../assets/default-header.png" />
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="编号" width="100px"> </el-table-column>
      <el-table-column prop="name" label="名字" width="100px"> </el-table-column>
      <el-table-column prop="username" label="用户名" width="120px"> </el-table-column>
      <el-table-column prop="phone" label="电话" width="120px"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="160px"> </el-table-column>
      <el-table-column prop="address.city" label="城市" width="170px"></el-table-column>
      <!-- <el-table-column prop="website" label="网站" width=""></el-table-column>
    <el-table-column prop="company.name" label="公司" width=""></el-table-column> -->
      <el-table-column>
        <template #header>
          <el-input v-model="searchContent" size="medium " placeholder="输入关键字搜索" />
          <el-button slot="reference" size="medium " type="primary" @click="addNewUser">添加新用户<i
              class="el-icon-plus"></i></el-button>
        </template>


        <template slot-scope="scope">
          <el-button size="medium " @click="handleEdit(scope.$index, scope.row)">详情</el-button>
          <el-popconfirm @confirm="handleDelete(scope.$index, scope.row)" confirm-button-text="确定"
            cancel-button-text="再想想" icon="el-icon-info" icon-color="red" title="确定删除这行内容吗？">
            <el-button slot="reference" size="medium " type="primary">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"
      @size-change="handleSizeChange" :page-count="pageCount" :page-size="pageSize" prev-text="上一页" next-text="下一页"
      :current-page="currentPage">
    </el-pagination>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      searchContent: "",
      currentPage: 1,
      pageSize: 5,
      pageCount: 1
    };
  },
  created() {
    this.query();
  },
  computed: {
    //过滤数据 实现分页和搜索效果
    filterTableData: function () {
      let input = this.searchContent && this.searchContent.toLowerCase();
      let searchItems;
      //搜索 且有结果就返回一个结果数组
      if (input) {
        searchItems = this.tableData.filter(function (item) {
          return Object.keys(item).some(function (key1) {
            return String(item[key1])
              .toLowerCase()
              .match(input);
          });
        });
      } else {
        //不搜索 则返回整个表数据
        searchItems = this.tableData;
      }
      return searchItems;
    }
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else if (rowIndex % 2 === 1) {
        return "success-row";
      }
      return "";
    },
    query() {
      fetch("http://47.241.102.141:3000/users")
        .then((response) => response.json())
        .then((data) => {
          this.tableData = data;
          this.pageCount = Math.ceil(this.tableData.length / this.pageSize);
          console.log(data);
        });
    },
    handleEdit(index, row) {
      this.$router.push("/dashboard/userdetail/" + row.id);
      console.log(index, row.id);
    },
    handleDelete(index, row) {
      console.log(index, row);

      this.axios.delete('http://47.241.102.141:3000/users/' + row.id)
        .then((result) => {
          if (result.data) {
            // alert(result.data);
            for (let i = 0; i < this.tableData.length; i++) {
              if (this.tableData[i].id == row.id) {
                this.tableData.splice(i, 1);
                break;
              }
            }
          } else {
            alert("删除失败");
          }
        })
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    handleSizeChange(pageSize) {
      this.currentPage = 1;
      this.pageSize = pageSize;
    },
    addNewUser() {
      this.$router.push("/dashboard/adduser");
    }
  },
};
</script>



<style>
.el-table .warning-row {
  /* background: oldlace;
   */
  background-color: white;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table {
  width: 80%;
  margin: 0 auto;
}

.el-input {
  width: 160px;
  margin: 0 60px 0 0px;
}
</style>